<template>
  <div class="user-list">
    <div class="action-bar">
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索用户名、邮箱或手机号"
          style="width: 300px;"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-left: 12px;">
          <el-option label="全部" value="" />
          <el-option label="正常" value="active" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" @click="showAddUserDialog">
          <el-icon><Plus /></el-icon>
          添加用户
        </el-button>
        <el-button @click="exportUsers">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>
    
    <el-table :data="filteredUsers" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      
      <el-table-column label="用户信息" min-width="200">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar :size="40" :src="row.avatar" />
            <div class="user-details">
              <div class="username">{{ row.username }}</div>
              <div class="email">{{ row.email }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="phone" label="手机号" width="120" />
      
      <el-table-column prop="role" label="角色" width="100">
        <template #default="{ row }">
          <el-tag :type="getRoleType(row.role)" size="small">
            {{ getRoleLabel(row.role) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
            {{ row.status === 'active' ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="createdAt" label="注册时间" width="160" />
      
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="editUser(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="text" size="small" @click="toggleUserStatus(row)">
            <el-icon><Lock /></el-icon>
            {{ row.status === 'active' ? '禁用' : '启用' }}
          </el-button>
          <el-button type="text" size="small" @click="deleteUser(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
    
    <!-- 添加用户对话框 -->
    <AddUserDialog
      v-model="showAddDialog"
      @success="handleAddUserSuccess"
    />
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddUserDialog from './AddUserDialog.vue'

export default {
  name: 'UserList',
  components: {
    AddUserDialog
  },
  setup() {
    const loading = ref(false)
    const searchKeyword = ref('')
    const statusFilter = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)
    const showAddDialog = ref(false)
    
    const users = ref([
      {
        id: 1,
        username: 'admin',
        email: 'admin@example.com',
        phone: '13800138000',
        role: 'super_admin',
        status: 'active',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        createdAt: '2024-01-01 10:00:00',
        lastLogin: '2024-01-15 14:30:00'
      },
      {
        id: 2,
        username: 'manager',
        email: 'manager@example.com',
        phone: '13800138001',
        role: 'admin',
        status: 'active',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        createdAt: '2024-01-02 11:00:00',
        lastLogin: '2024-01-14 16:20:00'
      },
      {
        id: 3,
        username: 'user001',
        email: 'user001@example.com',
        phone: '13800138002',
        role: 'user',
        status: 'active',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        createdAt: '2024-01-03 12:00:00',
        lastLogin: '2024-01-13 09:15:00'
      }
    ])
    
    const filteredUsers = computed(() => {
      let filtered = users.value
      
      if (searchKeyword.value) {
        filtered = filtered.filter(user => 
          user.username.includes(searchKeyword.value) ||
          user.email.includes(searchKeyword.value) ||
          user.phone.includes(searchKeyword.value)
        )
      }
      
      if (statusFilter.value) {
        filtered = filtered.filter(user => user.status === statusFilter.value)
      }
      
      return filtered
    })
    
    const getRoleType = (role) => {
      const types = {
        super_admin: 'danger',
        admin: 'warning',
        user: 'info'
      }
      return types[role] || 'info'
    }
    
    const getRoleLabel = (role) => {
      const labels = {
        super_admin: '超级管理员',
        admin: '管理员',
        user: '普通用户'
      }
      return labels[role] || '未知'
    }
    
    const showAddUserDialog = () => {
      showAddDialog.value = true
    }
    
    const handleAddUserSuccess = () => {
      // 刷新用户列表
      ElMessage.success('用户添加成功，列表已刷新')
      // 这里可以调用API重新获取用户列表
    }
    
    const editUser = (user) => {
      ElMessage.info('编辑用户功能开发中...')
    }
    
    const toggleUserStatus = (user) => {
      const newStatus = user.status === 'active' ? 'disabled' : 'active'
      user.status = newStatus
      ElMessage.success(`用户${newStatus === 'active' ? '启用' : '禁用'}成功`)
    }
    
    const deleteUser = (user) => {
      ElMessageBox.confirm(
        `确定要删除用户 "${user.username}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = users.value.findIndex(u => u.id === user.id)
        if (index !== -1) {
          users.value.splice(index, 1)
          ElMessage.success('用户删除成功')
        }
      })
    }
    
    const exportUsers = () => {
      ElMessage.info('导出功能开发中...')
    }
    
    return {
      loading,
      searchKeyword,
      statusFilter,
      currentPage,
      pageSize,
      total,
      showAddDialog,
      filteredUsers,
      getRoleType,
      getRoleLabel,
      showAddUserDialog,
      handleAddUserSuccess,
      editUser,
      toggleUserStatus,
      deleteUser,
      exportUsers
    }
  }
}
</script>

<style scoped>
.user-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-area {
  display: flex;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.email {
  color: #666;
  font-size: 12px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
